.go{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1001;
}
.more{
    position: fixed;
    bottom: 80px;
    right: 60px;
    z-index: 1111;
    animation: fly01 2s linear infinite alternate;
}
.screen01{
    background: url(../images/01-bg.png) no-repeat bottom center;
}

.neirongkuang{
    width: 900px;
    height: 600px;
    background: rgba(0,0,0,.1);
    /*//影响单个*!*/
    /*background-color: lavenderblush;*/
    position:absolute;
    left: 50%;
    margin-left: -450px;
    bottom: 0;
    /*opacity: 0.4;   影响整个包括内部元素*/

}
.screen01 .goods{
    text-align: center;
    position: absolute;
    margin-top: 300px;
}
.screen01 .shafa{
    position: absolute;
    left: 150px;
    top: 230px;
    animation: fly01 0.8s linear infinite alternate;
}
.screen01 .fei{
    position: absolute;
    right: -50px;
    top: 20px;
    animation: fly01 2s linear infinite alternate;
    /*alternate 逆播放  infinite无穷次*/
}
/*第一屏动画，布局定位，动画位移*/
@keyframes fly01 {
    from{transform: translateY(-30px)}
    /*50%{transform: translateY(30px)}*/
    to{transform:translateY(30px)}
}
.screen02{
    background: url("../images/02-bg.png") no-repeat bottom center;
}
.screen02 .goods{
    position: absolute;
    left: 50%;
    margin-left: -220px;
    bottom: 210px;
    transform-origin: right bottom;
    transform: scale(0);
}
.screen02 .shafa{
    transform: scale(0.5);
    position: absolute;
    left: 292px;
    top: 132px;
    opacity: 0;
    z-index: 1009;
}
.screen02 .input{
    position: absolute;
    right: 171px;
    top: 121px;
    /*!*transform: scale(0.7);*! 停留位置*/
    /*默认转换圆点*/
    /*右边-中间-停留-右上角*/
    /*transform: translate(-180px,130px); 中间位置*/
    /*transform: translate（2000px,130px) 最右边位置*/
    transform-origin: right top;
    opacity: 0;
    /*animation: input02 3s ;*/
}
.screen02.now .input{
    /*forwards 保持当前状态*/
    /*backwards 回到原点*/
    animation: input02 3s linear forwards;
}
.screen02 .input .search{}
.screen02 .input .key{
    position: absolute;
    left: 100px;
    top: 4px;opacity: 0;
}
.screen02.now .input .key{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen02.now .goods{
    /*transition: none清空转换;*/
    transform: scale(1);
    transition: all 1s linear 2s;
}
.screen02 .text{
    text-align: center;
 }
.screen02 .text .text1{

}
.screen02 .text  .text2{
    position: absolute;
    opacity: 0;

}

/*第二屏动画 now*/
.screen02.now .text .text1{
    position: absolute;
    opacity: 0;
}
.screen02.now .text .text2{
    position:static;
    opacity: 1;
    transition: opacity 1s;
}
/*需要做的动画*/
/*搜索框右边---中间--停留---右上角*/
/*商品列表动画显示*/
/*!*transform: scale(0.7);*! 停留位置*/
/*默认转换圆点*/
/*右边-中间-停留-右上角*/
/*transform: translate(-180px,130px); 中间位置*/
/*transform: translate（2000px,130px) 最右边位置*/
@keyframes input02  {
     0%{
         /*初始元素位置*/
         opacity: 1;
         transform: translate(2000px,130px)
     }
    33%{transform: translate(-180px,130px)}
    66%{transform: translate(-180px,130px)}
    100%{
        opacity: 1;
        transform: scale(0.7);
    }
}
.screen02.leaved .shafa{
    animation: sofa02 1s linear ;
    /*forwards*/
}
@keyframes sofa02 {
    from{
        opacity: 1;
    }
    to{
        opacity: 1;
        /*沙发下移*/
        transform: translate(-80px,700px);
    }
}

.screen03{
    background: url("../images/03-bg.png") no-repeat top center;
}
.screen03 .shafa{
    position: absolute;
    left: 212px;
    top: 180px;
    display: none;
}
.screen03 .leaved text{

}.screen03 .change{
    position: absolute;
     right: 115px;
     bottom: 170px;
 }
.screen03 .change img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03 .cart{
    position: absolute;
    right: 190px;
    bottom: 100px;
 }
.screen03 .cart img:last-child{
    position: absolute;
    opacity: 0;
}
.screen03.now .cart img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .change img:last-child{
    position: static;
    opacity: 1;
    transition: all 1s linear;
}
.screen03.now .change img:first-child{
    display: none;
}
.screen03.now .cart img:last-child{
    display: none;
}
.screen03.now .shafa{
    display: block;
}
.screen04{
    background: url("../images/04-bg.png") no-repeat;
}
.screen04 .cloud{
    position: absolute;
    top: -5px;
    left: -400px;
    animation: cloud04 10s linear infinite alternate;
}

@keyframes cloud04 {
    from{

    }
    to{
     transform: translateX(1000px);
    }
}
.screen04 .text{
    text-align: center;
    margin-top: 100px;
}
.screen04 .text img:last-child{
    position: absolute;
    opacity: 0;
}
.screen04 .cart{
    text-align: center;
    margin-top: 50px;
    /*margin-bottom: 25px;*/
}








